<template>
  <div class="search_root" v-show="showThis">
    <div class="search_container">
        <span class="container_close" @click="searchSwitch(false)">
            <el-icon style="margin-right:0"><CloseBold /></el-icon>
        </span>
      <div class="search_content">
        <div class="search_div">
          <p style="font-size: 30px; text-align: left">搜索</p>
          <div class="search_input">
            <el-input
              v-model="searchText"
              placeholder="Please input"
              clearable
              @keyup="searchEvent($event)"
            >
              <template #append>
                <!-- <el-icon style="margin-right:5px"><Search /></el-icon> -->
                搜索</template
              >
            </el-input>
            <div class="search_history">
              <p style="margin-bottom: 10px">最近搜索</p>
              <el-tag
                class="ml-2"
                type="info"
                closable
                @close="tagHandleClose()"
                >Tag 3</el-tag
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SearchComponent",
  props:{
    
    },
  data() {
    return {
      searchText: "",
      showThis:false
    };
  },
  methods: {
    tagHandleClose() {
      alert("关闭");
    },
    searchEvent(obj) {
      if (obj.keyCode == 13) {
        console.log(13);
      }
    },
    searchSwitch(val){
        this.showThis=val
    }
  },
};
</script>
<style scoped>
.search_root {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 8;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.2);
}
.search_container {
  width: 90%;
  border-radius: 5px;
  height: 80%;
  padding: 50px;
  box-shadow: var(--el-box-shadow-lighter);
  margin: 50px auto auto auto;
  font-size: 20px;
  border-radius: 5px;
  background-color: white;
}
.search_root .container_close{
    float: right;
    display: block;
    width: 50px;
    cursor: pointer;
    height: 50px;
    /* background-color: var(--el-fill-color); */
}
.search_content {
  width: 100%;
  height: 100%;
}
.search_content .el-input-group {
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
}
.search_content .el-input-group__append {
  color: white;
  cursor: pointer;
  background-color: var(--el-color-primary);
}
.search_history {
  width: 100%;
  margin-top: 20px;
  margin-left: 0px;
}
</style>